<template>
    <div class="index">
        <div class="top"></div>
        <div class="title">
            <div class="name">在线考试答题</div>
            <div class="scr">选出您认为正确的答案！现在我们就马上开始吧！</div>
            <div class="btn">
                <el-button @click="enter"  :class="animate" type="success" icon="el-icon-check" circle></el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PSIndex",
        data(){
            return{
                animate: 'sub animate__animated animate__bounce',
            }
        },
        methods:{
            enter(){
                this.$router.push("/Phone");
            }
        }
    }
</script>

<style scoped>
.index{
    width: 254px;
    height: 420px;
    /*background-color: darksalmon;*/
    border: 1px solid RGB(241,243,244);
}
    .top{
        width: 254px;
        height: 150px;
        background-image: linear-gradient(RGB(243,245,246), RGB(255,255,255));
    }
    .title{
        width: 254px;
        height: 270px;
        /*background-color: burlywood;*/
    }
    .name{
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        line-height: 1.5;
    }
    .scr{
        box-sizing: border-box;
        width: 254px;
        height: 100px;
        font-size: 13px;
        /*background-color: darksalmon;*/
        padding: 24px 14px;
    }
    .sub{
        background-color: RGB(179,192,209);
        border: 1px solid RGB(179,192,209);
    }
    .btn{
        box-sizing: border-box;
        text-align: center;
        width: 254px;
        height: 100px;
        padding-top: 46px;
    }
.animate__animated.animate__bounce {
    --animate-duration: 4s;
}
 .animate__animated.animate__slideOutUp {
     --animate-duration: 2s;
 }
</style>
